<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<template #top>
				<view class="hdbg" :style="{height:height}"></view>
				<div class="order_head">
					<div class="wzWrap" @click="navChange(1)">
						<div :class="queryParams.classifyOilType==1?'selTxt':'noTxt'">加油</div>
						<div v-if="queryParams.classifyOilType==1" class="hline"></div>
					</div>
					<div class="wzWrap" @click="navChange(2)" style="margin-left: 34px;">
						<div :class="queryParams.classifyOilType==2?'selTxt':'noTxt'">加气</div>
						<div v-if="queryParams.classifyOilType==2" class="hline"></div>
					</div>
					<image class="headImg" src="/static/images/kefu.png" @click="callKefu"></image>
				</div>

				<div class="nav-selion">
					<div style="margin-right: auto;">
						<u-tabs :list="list4" lineWidth="30" lineColor="#fff" :activeStyle="{
						            color:'#303133',
						            fontWeight: '500',
						        }" :inactiveStyle="{
						            color:'#A1ABB9',
									fontWeight: '400',
						        }" itemStyle="padding-left: 37px; padding-right: 10px; height: 44px;" @change="tabclick">
						</u-tabs>
					</div>

					<div class="zflex" style="align-items: center;" @click="open">
						<div class="shai">筛选</div>
						<image class="shaiImg" src="/static/images/shaixuan.png"></image>
					</div>
				</div>

				<div style="background: #F4F5F9;padding: 12px;" v-if="queryParams.status==''">
					<div class="banView">
						<div class="banv50">
							<div class="p1">本月节省加油费(元)</div>
							<div class="p2">{{mcard.saveMoney | formatsNumber}}</div>
						</div>
						<div class="banv50">
							<div class="p1">本月已加油(升)</div>
							<div class="p2">{{mcard.oilCount | formatsNumber}}</div>
						</div>
					</div>
				</div>

				<uni-popup ref="popup" type="right" border-radius="10px 10px 0 0">
					<view class="selPupop">
						<div :style="{height:height}"></div>
						<div style="height: 90rpx;"></div>
						<div class="popTitlew">
							<div class="popTitLef">下单时间</div>
						</div>
						<div class="selpopCon">

							<div class="conwidth conwidth33" style="width:113px;margin-right: 0;padding-left: 10px;">
								<uni-datetime-picker type="datetime"
									v-model="beginGmtCreate">{{beginGmtCreate?parseTime(beginGmtCreate, '{m}-{d} {h}:{i}'):'最早时间'}}</uni-datetime-picker>
							</div>
							<div class="zpoplineWrap">
								<div class="zpoplineItem"></div>
							</div>

							<div class="conwidth conwidth33" style="width:113px;margin-right: 0;padding-left: 10px;">
								<uni-datetime-picker type="datetime"
									v-model="endGmtCreate">{{endGmtCreate?parseTime(endGmtCreate, '{m}-{d} {h}:{i}'):'最晚时间'}}</uni-datetime-picker>
							</div>
						</div>


						<div class="selfoot-wrap">
							<div class="selfoot-btn" style="margin-right: auto;" @click="resetQuery()">重置</div>
							<div class="selfoot-btn selfoot-btn2" @click="closeSearch()">确定</div>
						</div>
					</view>
				</uni-popup>
			</template>

			<view class="baseCon" v-for="(item,index) in dataList" :key="index" style="margin-bottom: 12px;">
				<div class="same-w">
					<div class="same-lef" style="display: flex;align-items: center;">
						<image class="oilIcon" src="/static/images/oilIcon.png"></image>
						<span class="item-title">{{item.oilStationName}}</span>
					</div>
					<div class="same-rig">
						<span class="colorDai" v-if="item.status==2">待使用</span>
						<span class="colorno" v-if="item.status==1">未支付</span>
						<span class="colorno" v-if="item.status==3">已完成</span>
						<span class="colorno" v-if="item.status==4">审核中</span>
						<span class="colorno" v-if="item.status==6">退款失败</span>
						<span class="colorno" v-if="item.status==5">退款通过</span>
						<span class="colorno" v-if="item.status==7">退款成功</span>
					</div>
				</div>
				<div class="zline"></div>
				<div @click="goPage('/pages/order/detail?id='+ item.id)">
					<div class="zflex">
						<image class="oilImg" src="/static/images/oilImg.png"></image>
						<div style="width: calc(100% - 60px);">
							<div class="zflex">
								<div style="font-size: 15px;font-weight: bold;margin-right: auto;">{{item.oilName}}
								</div>
							</div>
							<div><span class="oil-tl">实付：</span><span class="oil-tr">¥{{item.actualPayment}}</span>
							</div>
							<div><span class="oil-tl">营业时间：</span><span class="oil-tr">{{item.openTime}}</span></div>
						</div>
					</div>
					<div class="detail-lef" style="margin-top: 16px;font-size: 14px;">下单时间：{{item.gmtCreate}}</div>
				</div>
				<div class="zflex" style="justify-content: flex-end;margin-top: 6px;">
					<div class="btnJ" v-if="item.status==2" @click="goPage('/pages/order/detail?id='+ item.id)">查看卷码
					</div>
					<!-- <div class="btnJ2">再次购买</div> -->
				</div>
			</view>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
		</z-paging>



	</view>
</template>

<script>
	import {
		listDriver,
		monthCardCount,
	} from '@/request/api.js'
	export default {
		components: {

		},
		data() {
			return {
				height: '',
				show: true,
				navIndex: 1,
				dataList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					classifyOilType: 1, //归类油品类型 1:油 2:气
					status: '', //订单状态 1-已支付 2-已退款
				},
				beginGmtCreate: '',
				endGmtCreate: '',
				list4: [{
					name: '全部'
				}, {
					name: '已支付'
				}, {
					name: '已退款'
				}],
				mcard: {
					oilCount: 0,
					saveMoney: 0,
				},
			}
		},
		mounted() {
			this.getmcard()
			this.getHeight()
			//this.open()
		},
		onShareAppMessage() {
			return {
				title: ' ',
				path: '/pages/index/index'
			};
		},
		onShow() {
			this.initSearch()
		},
		methods: {

			getmcard() {
				monthCardCount().then(res => {
					this.mcard = res.data
				})
			},
			open() {
				this.$refs.popup.open('right')
				// console.log('open');
			},
			closeSearch() {
				this.$refs.popup.close()
				this.initSearch()
			},
			navChange(row) {
				this.queryParams.classifyOilType = row
				this.initSearch()
			},
			resetQuery() {
				this.beginGmtCreate = ""
				this.endGmtCreate = ""
			},

			initSearch() {
				this.queryParams.pageNum = 1
				this.$refs.paging.reload(false);
			},

			queryList(pageNo, pageSize) {
				uni.showLoading({
					title: "加载中...",
					mask: true
				})
				this.queryParams.params = {};
				if (this.beginGmtCreate && this.endGmtCreate) {
					this.queryParams.params["beginGmtCreate"] = this.beginGmtCreate;
					this.queryParams.params["endGmtCreate"] = this.endGmtCreate;
				}

				let data = this.queryParams;
				data.pageNum = pageNo
				data.pageSize = pageSize
				listDriver(this.queryParams).then((response) => {
					console.log(response)
					uni.hideLoading()
					this.$refs.paging.complete(response.rows)
				}).catch(() => {
					uni.hideLoading()
					this.$refs.paging.complete(false);
				})
			},

			tabclick(e) {
				if (e.index == 0) {
					this.queryParams.status = ''
				} else if (e.index == 1) {
					this.queryParams.status = 1
				} else {
					this.queryParams.status = 2
				}
				this.initSearch()
			},

			goPage(row) {
				uni.navigateTo({
					url: row,
				})
			},

			callKefu() {
				const phone = getApp().globalData.kefuPhone
				console.log(phone)
				uni.makePhoneCall({
					phoneNumber: phone,
					success() {

					}
				})
			},

			getHeight() {
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				const res = uni.getSystemInfoSync();
				let {
					statusBarHeight
				} = res;
				let {
					top,
					height,
					bottom
				} = menuButtonInfo;
				//顶部距离 
				// this.top = top + 'px';
				//胶囊高度
				this.height = height + 'px';
				//顶部导航栏高度
				// let wrap = bottom - height - statusBarHeight;
				// this.navBarHeight = bottom + wrap + 'px';
			},


		}
	}
</script>

<style scoped>
	.hdbg {
		background: #fff;
		position: relative;
		z-index: 99;
	}

	.order_head {
		display: flex;
		height: 44px;
		background: #fff;
		align-items: flex-end;
		position: relative;
		justify-content: center;
	}

	.headImg {
		width: 58px;
		height: 24px;
		position: absolute;
		left: 12px;
		top: 16px;
	}

	.wzWrap {
		display: flex;
		height: 30px;
		position: relative;
		justify-content: center;
	}

	.hline {
		height: 3px;
		width: 20px;
		background: #303133;
		border-radius: 2px;
		margin-top: 6px;
		display: inline-block;
		position: absolute;
		bottom: 0px;
		/* left: 6px; */
	}

	.selTxt {
		font-weight: 500;
		font-size: 16px;
		color: #303133;
	}

	.noTxt {
		font-weight: 500;
		font-size: 16px;
		color: #83878E;
	}

	.banView {
		display: flex;
		padding: 14px 12px;
		border-radius: 12px;
		box-sizing: border-box;
		background: #fff;
	}

	.banv50 {
		width: 50%;
		padding-left: 12px;
		box-sizing: border-box;
	}

	.banv50 .p1 {
		color: #83878E;
		margin-bottom: 4px;
	}

	.banv50 .p2 {
		font-size: 16px;
		font-weight: 500;
	}
</style>